<template>
    <div class="in">
        <div class="index2">
            <div class="iin">
                <div class="index2_1">
                    <span class="ti1" v-for="i in peer_route" :key="i" :style="[{borderBottom: name===i?'3px solid #00c3ff':''},{color: name===i?'#00c3ff':''}]" @click="route(i)">{{i}}</span>
                    <!-- <span class="ti2">最新回复</span>
                    <span class="ti3">热门</span> -->
                </div>
                <div class="index2_2" @click="Post_a_post">
                    <i class="el-icon-edit"></i>
                    <div>发布帖子</div>
                </div>
            </div>
        </div>
        <div class="index">
            <!-- <router-view /> -->
            <Latest :the_data1="data_source1" :the_data2="eerlist" :the_data3="Peer"></Latest>
        </div>
        <el-backtop :bottom="300" :right='300'> 
            <img src="../assets/img/top.png" alt="">
        </el-backtop>
    </div>
</template>

<script>
import Latest from '../components/Peer graph routing/Latest post.vue'
export default {
    components: {Latest},
    data() {
        return {
            name: '热门',
            peer_route: ['最新发帖', '最新回复', '热门'],
            data_source1: null, // 帖子数据
            eerlist: null, // 同人榜
            Peer: null,
            data1: [
                {
                    id: 1, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/07/279061046/76e07df6cb7ad1acbe1f186d22484c21_5633288476774361048.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                },
                {
                    id: 2, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/07/279061046/76e07df6cb7ad1acbe1f186d22484c21_5633288476774361048.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                },
                {
                    id: 3, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/07/279061046/76e07df6cb7ad1acbe1f186d22484c21_5633288476774361048.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                }
            ],
            data2: [
                {
                    id: 1, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/07/279061046/76e07df6cb7ad1acbe1f186d22484c21_5633288476774361048.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                },
                {
                    id: 2, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/09/179780182/ebe1003b82f5a93056fb5d2ad95e4f69_2739119911573678958.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                },
                {
                    id: 3, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/09/277817628/a8506d84e059f2f73ecd674fb71e7ec5_8390754087263321266.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                }
            ],
            data3: [
                {
                    id: 1, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/07/279061046/76e07df6cb7ad1acbe1f186d22484c21_5633288476774361048.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                },
                {
                    id: 2, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/09/277817628/a8506d84e059f2f73ecd674fb71e7ec5_8390754087263321266.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                },
                {
                    id: 3, 
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/07/279061046/76e07df6cb7ad1acbe1f186d22484c21_5633288476774361048.jpg?x-oss-process=image/resize,s_500/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '真实吗顶顶顶',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/296917e3c03b58d88eee8f38f76ae51f.png',
                    name: '不是吧老铁'
                }
            ],
            Peerlist: [
                {
                    id: 1,
                    img: 'https://upload-bbs.mihoyo.com/upload/2022/05/05/81879993/280f6f42eff714787240775969a2d23d_4752493220723965503.jpg?x-oss-process=image/resize,s_200/quality,q_80/auto-orient,0/interlace,1/format,jpg',
                    title: '女覅是v你比哥白尼平衡感然后我共和国回复iv公布i1',
                    head: 'https://img-static.mihoyo.com/communityweb/upload/fbab8d08cd32fc760b1d500eeacd7f2e.png',
                    name: '啦啦啦啦啦啦啦',
                    Ranking: '1'
                }
            ]
        }
    },
    mounted() {
        this.First_pass()
    },
    methods: {
        First_pass() {
            this.data_source1 = this.data1
            this.eerlist = this.Peerlist
            this.Peer = this.$route.params.name
            // console.log('接收参数：',this.$route.params.name);
        },
        route(i) {
            this.name = i
            if(i === '最新发帖') {
                // this.$router.push('/llatest post')
                // this.pp = [{p: 11, n: 22}]
                this.data_source1 = this.data1
            }else if(i === '最新回复') {
                // this.$router.push('/llatest reply')
                // this.pp = [{p: 99, n: 88}]
                this.data_source1 = this.data2
            }else if(i === '热门') {
                // this.$router.push('/lhot')
                this.data_source1 = this.data3
            }
        },
        Post_a_post() {
            this.$emit('Sea', '-6')
            this.$router.push('/post')
        },
    }
}
</script>
<style lang="less" scoped>
    .el-backtop img {
        max-width: 100px;
    }
    .in {
        width: 100%;
        background-color: #f7f5f5;
        .index {
            // border: 1px solid red;
            // width: 800px;
            // display: flex;
            margin-top: 80px;
            // justify-content: center;
        }
        .index2 {
            // border: 1px solid red;
            opacity: 1;
            position: absolute;
            z-index: 2;
            position: fixed;
            top: 120;
            width: 100%;
            background-color: white;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            .iin {
                // border: 1px solid red;
                width: 50%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .index2_1 {
                    height: 100%;
                    // border: 1px solid black;
                    display: flex;
                    align-items: center;
                    span {
                        // border: 1px solid red;
                        display: flex;
                        align-items: center;
                        height: 100%;
                        margin-left: 10px;
                        font-size: 19px;
                        // color: #00c3ff;
                        // border-bottom: 2px solid #00c3ff;
                        cursor: pointer;
                    }
                }
                .index2_2 {
                    width: 120px;
                    background-color: #ffe14c;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 30px;
                    padding: 10px;
                    font-weight: bolder;
                    border-radius: 5px;
                    cursor: pointer;
                    i {
                        font-size: 20px;
                    }
                }
            }
        }
    }
</style>